本项目系统基于macOS High Sierra 10.13.6
RN 版本 react-native-cli 2.0.1
react-native 0.56.0
慕课跟学的一个 RN 的基础项目Demo(目前只针对 iOS 这一块),做个复盘,方便从广度上对 React Native 有一个基本的认识
项目大致功能
- 使用GitHub 的trending功能来查看最热最火的开源项目,可以进行查看、收藏、分享等操作。
- 可以订阅我所喜欢的标签或语言 项目内容包括
- 列表和一些控件的基本使用
- 界面间的传值和跳转
- 与原生交互,分享与第三方登录
- 解决启动白屏的问题
- CodePush 热更新的使用
- 项目打包和发布
用 WebStorm
打开项目RNGit_Demo,确保本机上安装了 Xcode,终端执行 npm install
,然后react-native run-ios
,这样就可以看到项目效果,大概了解下项目做了哪些东西
还有一个要优先知道的东西就是RN如何调试
项目结构分析
如果没有前端经验,第一次接触 RN 项目是比较懵的,所以第一步我们需要先知道它的项目结构
|
|
跟着项目看,入口就是 index.js
文件了,从这里开始看
|
|
AppNavigator 是路由,所有需要跳转的页面都需要在这里注册,导航组件参考这里
WelcomePage
欢迎页,在实际项目中做导航页,然后到首页
HomePage
,这个页面可以理解为 iOS 的 tabbar 设置页,这里需要知道React-Native
的生命周期和一些基本语法,Props
和 State
是优先要理解的,很重要。
PopularPage 模块的列表用的 FlatList, 数据请求封装在 DataRepository.js
内,这一块需要知道 Promise
语法与 then
的用法的使用,Fetch
基本使用
MyPage 模块里包括功能有
- codePush热更新
- 原生模块的交互
- 自定义标签与排序
codePush热更新跟上面那个教程就 OK 了,有要注意的地方就是打包命令这里
|
|
RN 更新之后已经统一了入口文件,需要改为
|
|
如果有报 --entry-file option missing
之类的错误,检查下有没有拼写错误.
在真机上跑 RN 项目, 命令是
|
|
启动白屏问题
首先要知道原生 iOS 启动页,它的消失时间就是 didFinishLaunchingWithOptions
的函数周期走完,我们平时需要将启动页延迟消失可以采用阻塞主线程来达到目的
知道这个好办,我们可以在 didFinishLaunchingWithOptions
里每0.1s休眠一次,直到 RN 中页面加载完成,在 js 文件的 componentDidMount
内再调用原生方法取消主线程的休眠方法,这样就达到了目的,具体实现在 RNSplashScreen
类
发布APP之打包iOS应用
这里相对于原项目精简了许多功能,都是基础,会更加好懂一点,通过这个项目能对 RN 有一个基本的认知,方便后续深入开发
这是我引入的第三方依赖,在package.json
里,自己动手过一遍项目的话建议先把库全引入进来
|
|
比如 npm i react-navigation --save
另外有很多细节的地方,这里说的比较粗糙,不会精确到每个点去说,具体需要自己跟着走一遍代码才能知道,中间应该会碰到不少问题,需要有点耐心,发现报错不要急躁,耐心去检查代码,善用Google,发现错误才能进步…..